<template>
  <div style="width:100%;height: 100%;" id="box" ref="box">
    <el-card
      class="card"
      :style="{
        width: cardWidth + 'px',
        top: top + 'px',
        height: 'calc( 100vh - ' + height + 'px)',
      }"
      ref="warp"
    >
      <div class="containers">
        <el-input
          style="width:100%;"
          placeholder="输入关键字进行过滤"
          v-model="filterText"
          clearable
        >
        </el-input>
        <el-tree
          :data="list"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :expand-on-click-node="false"
          :render-content="renderContent"
          :filter-node-method="filterNode"
          default-expand-all
          ref="tree"
          v-loading="loading"
          highlight-current
        />
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.card {
  position: fixed;
  z-index: 10;
  overflow: auto;
}
.card::-webkit-scrollbar {
  display: none;
}
.containers {
  max-height: 100%;
  min-height: 100%;
  overflow: auto;
}
.el-input {
  margin-bottom: 20px;
}
>>> .el-tree-node__content {
  padding-left: 0 !important;
}
</style>
<script>
import { corpTeam } from "@/api/common";
import elementResizeDetectorMaker from "element-resize-detector";
export default {
  data() {
    return {
      cardWidth: null,
      top: 153,
      height: 171,
      defaultProps: {
        children: "children",
        label: "value",
      },
      list: [],
      filterText: "",
      loading: false,
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span style="margin-right:13px">
            {data.uuid == "" ? (
              " "
            ) : (
              <i
                style={
                  data.exitTime == "0000-00-00 00:00:00"
                    ? "color:#67C23A"
                    : "color:red"
                }
                class="iconfont ali-icon-yuandian"
              ></i>
            )}
          </span>
          <span>{node.label}</span>
        </span>
      );
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.value.indexOf(value) !== -1;
    },
    getList() {
      this.loading = true;
      corpTeam()
        .then((res) => {
          this.list = res.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleNodeClick(data) {
      var datas = {};
      if (data.children) {
        datas.corpCode = data.uuid;
      } else {
        datas.teamSysNo = data.uuid;
      }
      this.$emit("upList", datas);
    },
    getContainerkWidth() {
      const erd = elementResizeDetectorMaker(),
        that = this;
      this.$nextTick(() => {
        erd.listenTo(this.$refs.box, (element) => {
          that.cardWidth = element.offsetWidth - 10;
        });
      });
    },
    //获取滚动条高度
    handleScroll(event) {
      console.log();
      if (event.target.className === "el-main p-b-0 main-container") {
        this.top =
          153 - (event.target.scrollTop >= 93 ? 93 : event.target.scrollTop);
        this.height =
          171 - (event.target.scrollTop >= 90 ? 90 : event.target.scrollTop);
      }
    },
  },
  mounted() {
    this.getContainerkWidth();
    window.addEventListener("scroll", this.handleScroll, true);
    this.getList();
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>
